<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <img src="" alt="" id="imgAvatar">
    <!-- 加上布尔属性 multiple 可以一次选择多个文件 -->
    <input type="file" id="avatar">
    <button>上传</button>

    <script>
        async function upload() {
            const inp = document.getElementById("avatar");
            if (inp.files.length === 0) {    // 通过 inp.files 获取选择的文件数据
                alert("请选择要上传的文件");
                return;
            }
            const formData = new FormData();   //构建请求体，一个特殊的对象
            console.log(formData);
            console.log(inp.files);
            formData.append("imagefile", inp.files[0]);
            const url = "http://101.132.72.36:5100/api/upload"
            const resp = await fetch(url, {
                method: "POST",
                body: formData      //一般会自动修改请求头为 multipart/form-data， 注意，这里的数据不是字符串
            });
            const result = await resp.json();
            console.log(result);  // 返回的数据是一个普通的json对象，里面包含上传的图片在服务器的路径
            return result;
        }

        document.querySelector("button").onclick = async function() {
            const result = await upload();
            const img = document.getElementById("imgAvatar")
            img.src = result.path;
        }
    </script>
</body>

</html>